<template>
  <el-card class="payment-card" shadow="never">
    <div class="section-header">
      <h3 class="section-title">优惠券/红包管理</h3>
      <el-button type="primary" plain size="small" @click="applyCoupon">
        <el-icon><Plus /></el-icon> 添加优惠券
      </el-button>
    </div>
    
    <div v-if="coupons.length === 0" class="empty-coupons">
      <el-empty description="暂无优惠券" />
      <el-button type="primary" @click="applyCoupon">添加优惠券</el-button>
    </div>
    
    <div v-else class="coupon-list">
      <el-row :gutter="16">
        <el-col v-for="(coupon, index) in coupons" :key="index" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <div class="coupon-card" :class="{ 'coupon-used': coupon.status !== '可用' }">
            <div class="coupon-amount">{{ coupon.amount }}</div>
            <div class="coupon-info">
              <div class="coupon-name">{{ coupon.name }}</div>
              <div class="coupon-expiry">有效期至: {{ coupon.expiry }}</div>
              <el-tag size="small" :type="coupon.status === '可用' ? 'success' : 'info'" class="coupon-status">
                {{ coupon.status }}
              </el-tag>
            </div>
            <div class="coupon-actions">
              <el-button 
                type="primary" 
                size="small" 
                :disabled="coupon.status !== '可用'"
                @click="useCoupon(coupon)"
              >
                立即使用
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <div class="payment-methods">
      <div class="section-subheader">
        <h4 class="subsection-title">支付方式</h4>
      </div>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12">
          <div class="payment-method-card">
            <div class="payment-method-icon">
              <el-icon><CreditCard /></el-icon>
            </div>
            <div class="payment-method-info">
              <div class="payment-method-name">我的银行卡</div>
              <div class="payment-method-detail">已绑定 {{ paymentMethods.cards.length }} 张银行卡</div>
            </div>
            <div class="payment-method-action">
              <el-button type="primary" link>管理</el-button>
            </div>
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12">
          <div class="payment-method-card">
            <div class="payment-method-icon wechat">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <div class="payment-method-info">
              <div class="payment-method-name">微信支付</div>
              <div class="payment-method-detail">{{ paymentMethods.wechat ? '已绑定' : '未绑定' }}</div>
            </div>
            <div class="payment-method-action">
              <el-button type="primary" link>{{ paymentMethods.wechat ? '管理' : '绑定' }}</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
  
  <el-dialog v-model="couponDialogVisible" title="添加优惠券" width="500px" center>
    <el-form label-width="80px">
      <el-form-item label="优惠码">
        <el-input v-model="couponCode" placeholder="请输入优惠券码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="couponDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCoupon">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, CreditCard, ChatDotRound } from '@element-plus/icons-vue'

// 示例数据，实际应该从API获取
const coupons = ref([
  { name: '新用户立减券', amount: '¥20', status: '可用', expiry: '2024-12-31' },
  { name: '端午特惠券', amount: '¥50', status: '已使用', expiry: '2024-06-10' },
  { name: '周末特惠券', amount: '¥30', status: '可用', expiry: '2024-08-15' },
  { name: '生日礼券', amount: '¥100', status: '可用', expiry: '2024-11-20' }
])

const paymentMethods = ref({
  cards: [
    { type: '储蓄卡', bank: '中国银行', last4: '4567' }
  ],
  wechat: true
})

const couponDialogVisible = ref(false)
const couponCode = ref('')

function useCoupon(coupon: any) {
  ElMessage.success(`即将使用优惠券: ${coupon.name}`)
  // 实际应用中，这里应该跳转到订单页面，并自动应用该优惠券
}

function applyCoupon() {
  couponDialogVisible.value = true
}

function confirmCoupon() {
  if (!couponCode.value) {
    ElMessage.warning('请输入优惠券码')
    return
  }
  
  // 模拟验证优惠券
  ElMessage.success('优惠券添加成功')
  couponDialogVisible.value = false
  couponCode.value = ''
  
  // 模拟添加新优惠券
  coupons.value.unshift({
    name: '新增优惠券',
    amount: '¥25',
    status: '可用',
    expiry: '2024-12-31'
  })
}
</script>

<style scoped>
.payment-card {
  border: none;
  box-shadow: none !important;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin: 0;
}

.section-subheader {
  margin: 36px 0 20px 0;
}

.subsection-title {
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  margin: 0;
}

.empty-coupons {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.coupon-list {
  margin-bottom: 20px;
}

.coupon-card {
  position: relative;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1976d2 0%, #64b5f6 100%);
  color: white;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 160px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.coupon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.coupon-card.coupon-used {
  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
  opacity: 0.8;
}

.coupon-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>') repeat;
  opacity: 0.2;
}

.coupon-amount {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 12px;
}

.coupon-info {
  flex: 1;
}

.coupon-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.coupon-expiry {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 8px;
}

.coupon-status {
  margin-bottom: 12px;
}

.coupon-actions {
  text-align: right;
}

.payment-methods {
  margin-top: 20px;
}

.payment-method-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.payment-method-card:hover {
  background: #ecf5ff;
}

.payment-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.payment-method-icon.wechat {
  background: #07c160;
}

.payment-method-icon .el-icon {
  font-size: 20px;
}

.payment-method-info {
  flex: 1;
}

.payment-method-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.payment-method-detail {
  font-size: 13px;
  color: #909399;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .coupon-card {
    height: 180px;
  }
}
</style> 